<template>
  <view class="body">
    <view class="container">
      <view class="box">
        <view class="box_title">{{
          this.item != "" ? this.item.title : this.title
        }}</view>
        <view class="bon_eat">{{ modalTxt }}</view>
      </view>
      <myTurntableDraw
        ref="raffleWheel"
        :width="boxData.width"
        :height="boxData.height"
        :prizeList="prizeList"
        :targetIndex="targetIndex"
        @befoterClick="befoterClick"
        @afterClick="afterClick"
      >
      </myTurntableDraw>
      <uni-fab
        :pattern="pattern"
        :content="content"
        :horizontal="horizontal"
        :vertical="vertical"
        :direction="direction"
        @trigger="trigger"
        @fabClick="fabClick"
      />
    </view>
  </view>
</template>
<script>
import myTurntableDraw from "@/components/my-turntable-draw/my-turntable-draw";
import uniFab from "@/components/uni-fab/uni-fab.vue";
export default {
  components: {
    uniFab,
    myTurntableDraw,
  },
  onShow() {
    let item = uni.getStorageSync("item");
    console.log(item);
    if (item) {
      this.prizeList = "";
      item = JSON.parse(item);
      console.log(this.prizeList);
      this.prizeList = item.list;
      this.item = item;
    } 
    this.$refs.raffleWheel
      ? this.$refs.raffleWheel.setView(item.list.length,item.list[3])
      : null;
  },
  data() {
    return {
      ifOnShow: false,
      list: "",
      item: "",
      boxData: {
        width: 400,
        height: 400,
      },
      horizontal: "right",
      vertical: "bottom",
      direction: "vertical",
      pattern: {
        color: "#7A7E83",
        backgroundColor: "#fff",
        selectedColor: "#1296db",
        buttonColor: "#1296db",
      },
      content: [
        {
          iconPath: "/static/mute.png",
          selectedIconPath: "/static/sound.png",
          active: false,
        },
        {
          iconPath: "/static/add.png",
          selectedIconPath: "/static/add.png",
          active: false,
        },
      ],
      prizeList: [
          {
            name: "1111水饺",
          },
          {
            name: "小笼包",
          },
          {
            name: "馒头",
          },
          {
            name: "盖浇饭",
          },
          {
            name: "火锅",
          },
          {
            name: "披萨",
          },
          {
            name: "牛肉面",
          },
          {
            name: "凉皮",
          },
        ],
      targetIndex: 0,
      modalTxt: "...",
      title: "今天吃什么呢？",
      sound: "/static/giftmusic.mp3",
    };
  },
  methods: {
    // eatData(){
    //   uni.setStorageSync("eatData",{"title":"今天吃什么？","list":"ajja")
    // },
    eatData() {
      uni.setStorageSync("eatData", {
        title: "今天吃什么？",
        list: [
          {
            name: "1111水饺",
          },
          {
            name: "小笼包",
          },
          {
            name: "馒头",
          },
          {
            name: "盖浇饭",
          },
          {
            name: "火锅",
          },
          {
            name: "披萨",
          },
          {
            name: "牛肉面",
          },
          {
            name: "凉皮",
          },
        ],
      });
    },
    befoterClick(data) {
      if (data.type == "start") {
        console.log("开始抽奖");
        // 获取中奖单位下标
        let _n = Math.floor(Math.random() * this.prizeList.length);
        console.log("选中商品项：" + _n);
        console.log("选中商品名：" + this.prizeList[_n].name);
        this.targetIndex = _n;
        data.callback && data.callback(_n);
      }
    },
    afterClick(data) {
      if (data.type == "end") {
        console.log(data);
        this.modalTxt = data.callback && data.callback();
        console.log(this.modalTxt);
        if (this.content[0].active) {
          const innerAudioContext = uni.createInnerAudioContext();
          innerAudioContext.src = this.sound;
          innerAudioContext.play();
        }

        let list = uni.getStorageSync("gift");
        if (list) {
          list = JSON.parse(list);
          // list.push({ title: this.item!=''? this.item.title:this.title, gift: this.modalTxt });
          list.push({
            title: this.item != "" ? this.item.title : this.title,
            gift: this.modalTxt,
          });
          uni.setStorageSync("gift", JSON.stringify(list));
        } else {
          let list = [];
          list.push({
            title: this.item != "" ? this.item.title : this.title,
            gift: this.modalTxt,
          });
          uni.setStorageSync("gift", JSON.stringify(list));
        }
        this.list = list;
        console.log(this.list);
      }
    },
    trigger(e) {
      if (e.index == 1) {
        uni.navigateTo({
          url: "../index/addmode",
        });
      } else {
        this.content[e.index].active = !e.item.active;
        uni.showToast({
          title: `${this.content[e.index].active ? "开启" : "关闭"}声音`,
          icon: "none",
        });
      }
    },
    fabClick(e) {},
    stopKip(){
       uni.showToast({
          title:'当前正在转动转盘',
          icon:'none',
        });
    }
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 200upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 50upx;
  .box_title {
    font-size: 20px;
  }
}
</style>